import { defineComponent } from 'vue';
import Basic from './Basic.vue';
import Chen from './Chen.vue';
import Clickable from './Clickable.vue';
import Dense from './Dense.vue';
import LongLabel from './LongLabel.vue';
import Outline from './Outline.vue';
import Removable from './Removable.vue';
import Selected from './Selected.vue';
import Sizes from './Sizes.vue';
import Square from './Square.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>Chen</h5>
            <Chen />
          </div>
          <div class='block-'>
            <h5 class='title'>Basic</h5>
            <Basic />
          </div>
          <div class='block-'>
            <h5 class='title'>Clickable</h5>
            <Clickable />
          </div>
          <div class='block-'>
            <h5 class='title'>Dense</h5>
            <Dense />
          </div>
          <div class='block-'>
            <h5 class='title'>LongLabel</h5>
            <LongLabel />
          </div>
          <div class='block-'>
            <h5 class='title'>Outline</h5>
            <Outline />
          </div>
          <div class='block-'>
            <h5 class='title'>Removable</h5>
            <Removable />
          </div>
          <div class='block-'>
            <h5 class='title'>Selected</h5>
            <Selected />
          </div>
          <div class='block-'>
            <h5 class='title'>Sizes</h5>
            <Sizes />
          </div>
          <div class='block-'>
            <h5 class='title'>Square</h5>
            <Square />
          </div>
        </div>
      );
    };
  },
});
